<template>
<div v-if="commentList">
<div class="comment"  v-for="(item,index) in commentList"  :key="index">
    <div class="comment_text">
      <div class="comment_text_l">
          <img :src="item.userinfo.user_img"  v-if='item.userinfo && item.userinfo.user_img'>
          <img src="../assets/user.jpg" v-else>
      </div>
      <div class="comment_text_r">
          <div>
            <span v-if="item.userinfo.name">{{item.userinfo.name}}</span>
            <span v-else>偷了个橘子</span>
            <span>{{item.comment_date}}</span>
          </div>
          <div v-if="item.comment_content" class="pulish_s">
              {{item.comment_content}}
              <span class="pulish" @click="ReplyClick1(item.comment_id)">回复</span>
          </div>
          <div v-else>
               我们最终还是散于人海 不再相见 希望你还是那个 优秀的让我自卑的男孩 我也会偷偷地努力 希望有一天 能成为别人的梦想
          </div>
      </div>
    </div>
     <comment-text2 :commentChild="item.child1" @postClick="ReplyClick1"/>
  </div>
</div>
  
</template>

<script>
import CommentText2 from './commentText2'
export default {
    components:{
        CommentText2 
    },
    data(){
        return {
            commentList:null,
        }
    },
    created(){
        this.changeComment()
    },
    methods:{
        async changeComment(){
            const res = await this.$http.get('/comment/' + this.$route.params.id)
            if(res.data){
                //把获取的评论的条数，传到父组件
              this.$emit('lengthselect',res.data.length)
            }else{
              this.$emit('lengthselect',0)
            }
            this.commentList = this.changeCommentData(res.data)
        },  
        changeCommentData(data){
            function fn(temp){
                let arr1 = []
                for(var i = 0 ;i < data.length; i++){
                    if(data[i].parent_id == temp){
                        arr1.push(data[i])
                        data[i].child1 = fn(data[i].comment_id)
                    }
                }
                return arr1
            }
            
            const res = fn(null)
            return res
        },
        ReplyClick1(id){
            this.$emit('paramsID',id)
        }
    }
}
</script>
<style lang="less" scoped>
.comment{
 border-bottom: 1px solid rgba(182, 178, 178,0.5) ;
}
.comment_text{
    padding: 2.778vw 3.333vw;
    display: flex;
    
    .comment_text_l{
        width: 9vw;
        height: 9vw;
        margin-right: 2.778vw;
        img{
            display: block;
            width: 9vw;
            height: 9vw;
            border-radius: 50%;
            box-shadow: 0 0 10px rgb(167, 164, 164);
        }
    }
    .comment_text_r{
        flex: 1;
        div:nth-child(1){
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 2.778vw;
            span:nth-child(1){
                font-size: 4.444vw;
                font-weight: 550;
                color: rgb(202, 3, 3);
            }
            span:nth-child(2){
                font-size: 3.611vw;
                color: #aaa;
            }
        }
         div:nth-child(2){
            flex:1;
            font-size: 3.889vw;
         }
    }
}
.pulish_s{
    position: relative;
    .pulish{
        position: absolute;
        right: 1.389vw;
        color:rgb(30, 194, 98);
    }
}
</style>